<!--
 * @Description: 列表卡片
 * @Author: HuiSir<273250950@qq.com>
 * @Date: 2022-01-18 10:11:09
 * @LastEditTime: 2025-07-25 17:33:46
-->
<template>
  <div class="list-card">
    <div v-for="item in list" :key="item.title" class="card-item">
      <p class="desc">{{ item.desc }}</p>
      <p class="title">{{ item.title }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, PropType } from "vue";

// 组件名称（必要）
defineOptions({ name: "FyListCard" });

const props = defineProps({
  /**
   * 列表数据，格式
   * @type {title: string; desc: string;}[]
   */
  list: {
    type: Array as PropType<
      {
        title: string;
        desc: string;
      }[]
    >,
    default: () => [],
  },
});

const itemWidth = computed(() => 100 / props.list.length + "%");
</script>

<style scoped lang="scss">
.list-card {
  width: 100%;
  height: 100%;
  display: flex;
  .card-item {
    width: v-bind(itemWidth);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
    p.desc {
      font-size: 14px;
      margin-bottom: 10px;
    }
    p.title {
      font-size: 24px;
    }
  }
}
</style>
